<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城 ｜ 首页</title>
  <link rel="stylesheet" href="//at.alicdn.com/t/c/font_3738044_zgu2cufprs.css">
  <!-- <link rel="stylesheet" href="./font/iconfont.css"> -->
  <link rel="stylesheet" href="./css/style.css">
  <link rel="stylesheet" href="./css/index.css">
</head>

<body>
  <!-- html:5   语义化标签   div 
    pull   push  
    字体图标库（
      创建 ：
       进入iconfont网站： https://www.iconfont.cn/
       创建账号 

      引用
    ）
   -->

  <!-- header开始 -->
  <header id="header">
    <div class="container">
      <ul class="flex">
        <li><a href="">小米官网</a></li>
        <li><a href="">小米商城</a></li>
        <li><a href="">MIUI</a></li>
        <li><a href="">loT</a></li>
        <li><a href="">天星数科</a></li>
        <li><a href="">有品</a></li>
        <li><a href="">小爱开放平台</a></li>
        <li><a href="">企业团购</a></li>
        <li><a href="">资质证照</a></li>
        <li><a href="">协议规则</a></li>
        <li><a href="">下载app</a></li>
        <li><a href=""> Select Location</a></li>
      </ul>
      <ul class="flex">
        <li>登陆</li>
        <li>注册</li>
        <li class="no-gap">消息通知</li>
        <li class="cart"><i class="iconfont icon-Cart"></i><a href="">购物车 (0)</a></li>
      </ul>
    </div>
  </header> <!-- header 结束 -->


  <!-- nav 开始 -->
  <nav id="nav" class="container flex align-items-center">
    <!-- logo -->
    <a href="index.html"><img class="logo" src="./images/logo-mi2.png" alt=""></a>

    <!-- 导航 -->
    <ul class="flex">
      <li><a href="">手机1</a></li>
      <li><a href="">手机2</a></li>
      <li><a href="">手机3</a></li>
      <li><a href="">手机4</a></li>
      <li><a href="">手机5</a></li>
      <li><a href="">手机6</a></li>
    </ul>

    <!-- 搜索框 -->
    <div class="search">
      <input type="text" placeholder="Search..." name="" id="">
      <button><i class="iconfont icon-search"></i></button>
    </div>

  </nav> <!-- nav 结束 -->

  <div id="banner" class="container">
    <ul>
      <li><a href="">手机</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">电视</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">电脑</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">平板</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">红米</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">烤箱</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">冰箱</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">相机</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">电子元件</a><i class="iconfont icon-arrow"></i></li>
      <li><a href="">游戏机</a><i class="iconfont icon-arrow"></i></li>
    </ul>
  </div>

  <div class="hot-productions container">
    <ul class="list flex">
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
      <li><a href="#"><i class="iconfont icon-arrow"></i><span>保障服务</span></a></li>
    </ul>
    <ul class="flex img-list">
      <li>
        <a href="#">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/d0c515086acb3c3a3e976ad20901aac5.jpg?w=632&h=340">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/254c711cc71facf156ac955b8719dffa.jpg?w=632&h=340"
            alt="">
        </a>
      </li>
      <li>
        <a href="#">
          <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/28c13d0d11b38ec17fa5d83bc6ba5912.jpg?w=632&h=340">
        </a>
      </li>
    </ul>
  </div>
</body>

</html>